<!-- @format -->

<template>
    <el-container class="normal-layout" style="height: 100vh">
        <div class="normal-layout-sidebar">
            <Logo />
            <Sidebar />
        </div>
        <el-container>
            <!-- 高 50px -->
            <el-header height="50px">
                <Header />
            </el-header>
            <el-main>
                <!-- 高 40px -->
                <Tabs />
                <!-- 高 100vh - (50px + 40px) -->
                <Content />
                <!--                <Footer/>-->
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import {ref, computed, provide, onBeforeMount, onMounted} from "vue";
import {useStore} from "vuex";
import Sidebar from "./sidebar.vue";
import Header from "./header.vue";
import Logo from "./components/logo.vue";
import Tabs from "./components/tabs.vue";
import Content from "./content.vue";
import watermark from "@/utils/watermark.js"

const store = useStore();
// 设置全局 containerHeight
store.dispatch("setContainerHeight", document.documentElement.clientHeight - 90)

const userInfo = computed(() => {
    return store.getters.userInfo;
})

// 侧边栏折叠状态
const sidebarCollapsed = computed(() => store.getters.sidebarCollapsed);
onBeforeMount(() => {
    // window.$signalr.connection()
})
onMounted(() => {
    watermark.close()

    // 添加水印
    if (window.$config.watermark) {
        watermark.set(userInfo.value.phone, userInfo.value.realName)
    }
})
</script>

<style lang="scss">
.normal-layout {
    position: relative;

    .el-header {
        position: relative;
        background-color: rgba($color: #fff, $alpha: 1);
        box-sizing: border-box;
        border-bottom: 1px solid whitesmoke;
        padding: 0 10px;

        .b-icon {
            cursor: pointer;
            color: #333;

            &:hover {
                color: var(--el-menu-active-color);
            }
        }

        .user-menu {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            font-size: 15px;
            font-weight: unset;
            color: #333;
            //&:hover {
            //    color: var(--el-menu-active-color);
            //
            //    .b-icon {
            //        color: var(--el-menu-active-color);
            //    }
            //}

            .nick-name {
                padding-left: 8px;
            }
        }
    }

    .el-main {
        padding: 0;
    }

    .header-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin-left: 20px;
    }

    .normal-layout-sidebar {

    }
}
</style>
